<template>
  <div class="box1">
    <div class="operateBox">
      <div class="operateLeft">
        <el-button
          class="batchDele"
          :disabled="selectedIds.length === 0"
          @click="batchDelition"
        >批量删除</el-button>
        <el-button
          class="export"
          @click="exportQuestionMsg"
          :disabled="selectQuestionDetail.length==0"
        > 导出</el-button>
        <el-button
          class="plagiarism"
          :class="{'active': isActive}"
          plain
          @click="duplicateCheck1"
        >试题查重</el-button>
        <div class="searchBox">
          <el-input
            v-model="queryForm.searchValue"
            clearable
            style="width: 240px"
            placeholder="请输入"
            @clear="inputClear"
          />
          <div
            class="searchIcon"
            @click="getQuestionList1(props.activeIndex1)"
          >
            <el-icon>
              <Search />
            </el-icon>
          </div>
        </div>

      </div>

      <div class="operateRight">
        <el-dropdown
          trigger="click"
          @command="addQuestion"
        >
          <el-button
            type="primary"
            class="addQuestion"
          >
            <el-icon style="margin-right: 10px;">
              <Plus />
            </el-icon>
            <span>
              新增题目
            </span>
          </el-button>
          <template #dropdown>
            <el-dropdown-menu style="width: 144px;">
              <el-dropdown-item command="singleAdd">
                单个新增</el-dropdown-item>
              <el-dropdown-item command="batchAdd">
                批量新增
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <div class="tableBox table">
      <el-table
        :data="tableData"
        @selection-change="selectQuestion"
        style="width: 100%;"
      >
        <el-table-column
          type="selection"
          width="79"
        />
        <el-table-column
          label="编号"
          width="100"
          align="center"
        >
          <template #default="scope">
            <!-- 生成不重复的序号 -->
            {{ (queryForm.pageNum - 1)* queryForm.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="topic"
          label="题目"
          width="200"
        />
        <el-table-column
          prop="optionA"
          label="选项A"
          v-if="props.activeIndex1 == '0' || props.activeIndex1 == '1' || props.activeIndex1 == '2'"
        />
        <el-table-column
          prop="optionB"
          label="选项B"
          v-if="props.activeIndex1 == '0' || props.activeIndex1 == '1' || props.activeIndex1 == '2'"
        />
        <el-table-column
          prop="optionC"
          label="选项C"
          v-if="props.activeIndex1 == '0' || props.activeIndex1 == '1'"
        />
        <el-table-column
          prop="optionD"
          label="选项D"
          v-if="props.activeIndex1 == '0' || props.activeIndex1 == '1'"
        />
        <el-table-column
          prop="optionE"
          label="选项E"
          v-if="props.activeIndex1 == '1'"
        />
        <el-table-column
          prop="optionF"
          label="选项F"
          v-if="props.activeIndex1 == '1'"
        />
        <el-table-column
          v-if="props.activeIndex1 != '1'"
          prop="rightAnswers"
          label="答案"
        />
        <el-table-column
          v-if="props.activeIndex1 == '1'"
          prop="rightAnswersMore"
          label="答案"
        />
        <el-table-column
          prop="createBy"
          label="创建人"
          width="100"
        />
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="209"
        />
        <el-table-column
          label="操作"
          width="240"
        >
          <template #default="scope">
            <el-button
              link
              @click="editQuestions(scope.row.id)"
            >
              <el-icon
                style="color: #5974FF;font-size: 16px;margin-right: 2px;">
                <EditPen />
              </el-icon>
              <span style="font-size: 12px;color: #363636;">编辑</span>
            </el-button>
            <el-button
              link
              @click="deleteQuestions(scope.row.id)"
            >
              <el-icon
                style="color: #F99D38;font-size: 16px;margin-right: 2px;">
                <Delete />
              </el-icon>
              <span style="font-size: 12px;color: #363636;">删除</span>

            </el-button>
          </template>

        </el-table-column>
      </el-table>

    </div>
    <div class="pagination">

      <Pagination
        :total="total"
        v-model:page="queryForm.pageNum"
        v-model:limit="queryForm.pageSize"
        @pagination="pagination"
      ></Pagination>
    </div>

    <BatchAdd
      ref="batchAddRef"
      @download="templateDownload"
      @batchUpload="batchUpload"
    ></BatchAdd>
  </div>
</template>

<script setup>
import { ref, defineProps, computed, watch, onMounted, defineEmits } from 'vue';
import { useRouter, useRoute } from 'vue-router'



import Pagination from '@/components/Pagination/index.vue'
import BatchAdd from './batchAdd.vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { exportExcel, importExcel } from "@/utils/peak-tools.js";

// 引入获取题库列表, 删除题目,新增题目，试题查重的接口
import { getQuestionList, deleteQuestion, addQuestion as addNewQuestion, duplicateCheck } from "@/api/assessment/questionmanage.js"


const router = useRouter()
const route = useRoute()

const props = defineProps({
  activeIndex1: {
    type: String,
  },
});

const questionTypeStr = computed(() => {
  switch (props.activeIndex1) {
    case '0':
      return '单选题'
    case '1':
      return '多选题'
    case '2':
      return '判断题'
    case '3':
      return '填空题'
    case '4':
      return '论述题'
    default:
      return '单选题'
  }
})

const emit = defineEmits(['setActive'])

const currentIndex = ref(0)


const batchAddRef = ref(null)
function addQuestion (command) {
  if (command === "singleAdd") {
    router.push({
      path: 'addquestion',
      query: {
        type: props.activeIndex1,
        operateType: 'add',
        pageNum: queryForm.value.pageNum,
      }
    })
  } else if (command === "batchAdd") {
    batchAddRef.value.dialogVisible = true
  }
}

const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])

const queryForm = ref({
  pageNum: 1,
  pageSize: 10,
  topic: "",
  searchValue: "",
  sourceType: 0
})
const total = ref(0)

const topicType = ref(0)
const num = computed(() => route.query.pageNum)
onMounted(() => {
  queryForm.value.pageNum = route.query.pageNum ? route.query.pageNum * 1 : 1
  let activeIndex = route.query.activeIndex ? route.query.activeIndex * 1 : 0;
  emit('setActive', activeIndex)
  getQuestionList1(activeIndex)
})


// 获取题库列表
async function getQuestionList1 (activeIndex) {
  if (!(activeIndex instanceof Object)) {
    topicType.value = Number(activeIndex)
  } else if (activeIndex == 'undefined') {
    topicType.value = 0
  } else {
    topicType.value = Number(activeIndex)
  }
  const res = await getQuestionList({
    topicType: topicType.value,
    ...queryForm.value
  })
  tableData.value = res.rows
  total.value = res.total
}

watch(
  () => route.path,
  (newValue, oldValue) => {
    if ((newValue != '/assment/addquestion') && (oldValue != '/assment/questionbank')) {
      localStorage.removeItem('activeIndex1')
    } else if (newValue == "/assment/questionbank") {
      localStorage.removeItem('activeIndex1')
    }
  },
  {
    deep: true,
    immediate: true
  }
)



// 编辑的方法
function editQuestions (id) {
  router.push({
    path: 'addquestion',
    query: {
      id: id,
      type: props.activeIndex1,
      operateType: 'edit',
      pageNum: queryForm.value.pageNum,
    }
  })
}

// 点击编辑或新增后返回 


// 删除的方法
async function deleteQuestions (id) {
  ElMessageBox.confirm(
    '将删除此题目，是否继续？',
    '系统提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      confirmButtonClass: 'confirmDeleteBtn',
      cancelButtonClass: 'cancelDeleteBtn',
      type: 'warning',
    }
  )
    .then(async () => {
      const res = await deleteQuestion(id)
      getQuestionList1(props.activeIndex1)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

// 保存选中的题目id
const selectedIds = ref([])
// 保存选中的题目信息
const selectQuestionDetail = ref([])
// 选中的题目信息
function selectQuestion (data) {
  selectQuestionDetail.value = data
  selectedIds.value = data.map(item => item.id)
}

// 批量导出
async function exportQuestionMsg () {
  let list = selectQuestionDetail.value.map(item => {
    if (item.topicType == 0) {
      return {
        ...item,
        topicTypeTxt: '单选题'
      }
    } else if (item.topicType == 1) {
      return {
        ...item,
        topicTypeTxt: '多选题'
      }
    } else if (item.topicType == 2) {
      return {
        ...item,
        topicTypeTxt: '判断题'
      }
    } else if (item.topicType == 3) {
      return {
        ...item,
        topicTypeTxt: '填空题'
      }
    } else if (item.topicType == 4) {
      return {
        ...item,
        topicTypeTxt: '论述题'
      }
    }
  })
  let list1 = JSON.parse(JSON.stringify(list))
  const res = await exportExcel(`${questionTypeStr.value}信息.xlsx`, tableTemplateHead.value, list1, (sheet) => {
    let columnWidth = [14, 16, 25, 10, 14, 30, 30, 30, 10];
    sheet["!cols"] = columnWidth.map((wch) => ({
      wch,
    }));
    return sheet;
  })
}



// 批量删除的方法
function batchDelition () {
  ElMessageBox.confirm(
    '将删除选中题目，是否继续？',
    '系统提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      const res = await deleteQuestion(selectedIds.value)
      getQuestionList1(props.activeIndex1)
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}

const tableTemplateHead2 = ref({
  题目: "topic",
  选项A: "optionA",
  选项B: "optionB",
  选项C: "optionC",
  选项D: "optionD",
  选项E: "optionE",
  选项F: "optionF",
  答案: "rightAnswers",
  题目解析: "analysis",
  题目类型: 'topicTypeTxt',
})

const tableTemplateData2 = ref([
  {
    topic: "单选题题目",
    optionA: "A",
    optionB: "B",
    optionC: "C",
    optionD: "D",
    rightAnswers: "A",
    analysis: "这是题目解析",
    topicTypeTxt: '单选题'
  },
  {
    topic: "多选题题目",
    optionA: "A",
    optionB: "B",
    optionC: "C",
    optionD: "D",
    optionE: "E",
    optionF: "F",
    rightAnswersMore: "A,B,C",
    analysis: "这是题目解析",
    topicTypeTxt: '多选题'
  },
  {
    topic: "判断题题目",
    optionA: "A",
    optionB: "B",
    rightAnswers: "A",
    analysis: "这是题目解析",
    topicTypeTxt: '判断题'
  },
  {
    topic: "填空题题目",
    rightAnswers: "xxx",
    analysis: "这是题目解析",
    topicTypeTxt: '填空题'
  }, {
    topic: "论述题题目",
    rightAnswers: "xxxxxx",
    analysis: "这是题目解析",
    topicTypeTxt: '论述题'
  }

])

// 判断当前模版
const tableTemplateHead = computed(() => {
  if (props.activeIndex1 == 0) {
    return {
      题目: "topic",
      选项A: "optionA",
      选项B: "optionB",
      选项C: "optionC",
      选项D: "optionD",
      答案: "rightAnswers",
      题目类型: 'topicTypeTxt',
    }

  } else if (props.activeIndex1 == 1) {
    return {
      题目: "topic",
      选项A: "optionA",
      选项B: "optionB",
      选项C: "optionC",
      选项D: "optionD",
      选项E: "optionE",
      选项F: "optionF",
      答案: "rightAnswersMore",
      题目类型: 'topicTypeTxt',
    }

  } else if (props.activeIndex1 == 2) {
    return {
      题目: "topic",
      选项A: "optionA",
      选项B: "optionB",
      答案: "rightAnswers",
      题目类型: 'topicTypeTxt',
    }

  } else if (props.activeIndex1 == 3) {
    return {
      题目: "topic",
      答案: "rightAnswers",
      题目类型: 'topicTypeTxt',
    }

  } else if (props.activeIndex1 == 4) {
    return {
      题目: "topic",
      答案: "rightAnswers",
      题目类型: 'topicTypeTxt',
    }

  }
})
const tableTemplateData = computed(() => {
  if (props.activeIndex1 == 0) {
    return [
      {
        topic: "单选题题目",
        optionA: "A",
        optionB: "B",
        optionC: "C",
        optionD: "D",
        rightAnswers: "A",
        topicTypeTxt: '单选题'
      }
    ]
  } else if (props.activeIndex1 == 1) {
    return [
      {
        topic: "多选题题目",
        optionA: "A",
        optionB: "B",
        optionC: "C",
        optionD: "D",
        optionE: "E",
        optionF: "F",
        rightAnswersMore: "A,B,C",
        topicTypeTxt: '多选题'
      }
    ]
  } else if (props.activeIndex1 == 2) {

    return [
      {
        topic: "判断题题目",
        optionA: "A",
        optionB: "B",
        rightAnswers: "A",
        topicTypeTxt: '判断题'
      }
    ]
  } else if (props.activeIndex1 == 3) {

    return [
      {
        topic: "填空题题目",
        rightAnswers: "xxx",
        topicTypeTxt: '填空题'
      }
    ]
  } else if (props.activeIndex1 == 4) {

    return [
      {
        topic: "论述题题目",
        rightAnswers: "xxxxxx",
        topicTypeTxt: '论述题'
      }
    ]
  }
})

// 下载模板
async function templateDownload () {
  await exportExcel(`题目导入模板.xlsx`, tableTemplateHead2.value, tableTemplateData2.value, (sheet) => {
    let columnWidth = [16, 10, 10, 32, 16, 10, 30, 30, 30, 10];
    sheet["!cols"] = columnWidth.map((width) => ({
      width,
    }));
    return sheet;
  })

}

const uploadClassesFile = ref(null)
// 批量上传的方法
async function batchUpload (file) {
  uploadClassesFile.value = file

  const res = await importExcel(file.raw, tableTemplateHead2.value)
  console.log(res)
  
  if (Array.isArray(res.data)) {
    const singleChoiceData = res.data.filter(item => item.topicTypeTxt === '单选题').map(item => {
      return {
        ...item,
        topicType: 0
      }
    })
    const multipleChoiceData = res.data.filter(item => item.topicTypeTxt === '多选题').map(item => {
      let rightAnswersMore = item.rightAnswers
      return {
        ...item,
        rightAnswersMore,
        topicType: 1
      }
    })
    const judgeData = res.data.filter(item => item.topicTypeTxt === '判断题').map(item => {
      return {
        ...item,
        topicType: 2
      }
    })
    const fillData = res.data.filter(item => item.topicTypeTxt === '填空题').map(item => {
      return {
        ...item,
        topicType: 3
      }
    })
    const discussData = res.data.filter(item => item.topicTypeTxt === '论述题').map(item => {
      return {
        ...item,
        topicType: 4
      }
    })




    // 校验每种题型必传的属性不能为空
    // 单选题
    for (let i = 0; i < singleChoiceData.length; i++) {
      if (!singleChoiceData[i].topic) {
        return ElMessage({
          type: 'error',
          message: `单选题题目不能为空`,
        })
      }
      if (!singleChoiceData[i].optionA) {
        return ElMessage({
          type: 'error',
          message: `单选题选项A不能为空`,
        })
      }
      if (!singleChoiceData[i].optionB) {
        return ElMessage({
          type: 'error',
          message: `单选题选项B不能为空`,
        })
      }
      if (!singleChoiceData[i].optionC) {
        return ElMessage({
          type: 'error',
          message: `单选题选项C不能为空`,
        })
      }
      if (!singleChoiceData[i].optionD) {
        return ElMessage({
          type: 'error',
          message: `单选题选项D不能为空`,
        })
      }
      if (!singleChoiceData[i].rightAnswers) {
        return ElMessage({
          type: 'error',
          message: `单选题正确答案不能为空`,
        })
      }
      if (countUppercaseLetters(singleChoiceData[i].rightAnswers) > 1) {
        return ElMessage({
          type: 'error',
          message: `单选题正确答案只能有一个`,
        })
      }
      if (!isABCDUpperCase(singleChoiceData[i].rightAnswers)) {
        return ElMessage({
          type: 'error',
          message: `单选题正确答案只能为ABCD的其中一个`,
        })
      }
    }
    // 多选题
    for (let i = 0; i < multipleChoiceData.length; i++) {
      if (!multipleChoiceData[i].topic) {
        return ElMessage({
          type: 'error',
          message: `多选题题目不能为空`,
        })
      }
      if (!multipleChoiceData[i].optionA) {
        return ElMessage({
          type: 'error',
          message: `多选题选项A不能为空`,
        })
      }
      if (!multipleChoiceData[i].optionB) {
        return ElMessage({
          type: 'error',
          message: `多选题选项B不能为空`,
        })
      }
      if (!multipleChoiceData[i].optionC) {
        return ElMessage({
          type: 'error',
          message: `多选题选项C不能为空`,
        })
      }
      if (!multipleChoiceData[i].optionD) {
        return ElMessage({
          type: 'error',
          message: `多选题选项D不能为空`,
        })
      }
      if (!multipleChoiceData[i].rightAnswers) {
        return ElMessage({
          type: 'error',
          message: `多选题正确答案不能为空`,
        })
      }
      if (!multipleChoiceData[i].optionE && isHaveUppercaseE(multipleChoiceData[i].rightAnswers)) {
        return ElMessage({
          type: 'error',
          message: `您未上传E选项，但是正确答案中有E选项，请检查`,
        })
      }
      if (!multipleChoiceData[i].optionF && isHaveUppercaseF(multipleChoiceData[i].rightAnswers)) {
        return ElMessage({
          type: 'error',
          message: `您未上传F选项，但是正确答案中有F选项，请检查`,
        })
      }
      if (countUppercaseLetters(multipleChoiceData[i].rightAnswers) == 1) {
        return ElMessage({
          type: 'error',
          message: `多选题正确答案应为两个或两个以上`,
        })
      }
      if (!isStringOnlyUppercaseWithCommas(multipleChoiceData[i].rightAnswers)) {
        return ElMessage({
          type: 'error',
          message: `多选题正确答案只能包含用英文逗号隔开的大写字母`,
        })
      }
    }
    // 判断题
    for (let i = 0; i < judgeData.length; i++) {
      if (!judgeData[i].topic) {
        return ElMessage({
          type: 'error',
          message: `判断题题目不能为空`,
        })
      }
      if (!judgeData[i].optionA) {
        return ElMessage({
          type: 'error',
          message: `判断题选项A不能为空`,
        })
      }
      if (!judgeData[i].optionB) {
        return ElMessage({
          type: 'error',
          message: `判断题选项B不能为空`,
        })
      }
      if (!judgeData[i].rightAnswers) {
        return ElMessage({
          type: 'error',
          message: `判断题正确答案不能为空`,
        })
      }
      if (countUppercaseLetters(judgeData[i].rightAnswers) > 1) {
        return ElMessage({
          type: 'error',
          message: `判断题正确答案只能有一个`,
        })
      }
      if (!checkString(judgeData[i].rightAnswers)) {
        return ElMessage({
          type: 'error',
          message: `判断题正确答案只能为A或B`,
        })
      }
    }
    // 填空题
    for (let i = 0; i < fillData.length; i++) {
      if (!fillData[i].topic) {
        return ElMessage({
          type: 'error',
          message: `填空题题目不能为空`,
        })
      }
      if (!fillData[i].rightAnswers) {
        return ElMessage({
          type: 'error',
          message: `填空题正确答案不能为空`,
        })
      }

    }
    // 论述题
    for (let i = 0; i < discussData.length; i++) {
      if (!discussData[i].topic) {
        return ElMessage({
          type: 'error',
          message: `论述题题目不能为空`,
        })
      }
      if (!discussData[i].rightAnswers) {
        return ElMessage({
          type: 'error',
          message: `论述题正确答案不能为空`,
        })
      }
    }


    const uploadData = []
    uploadData.push(...singleChoiceData);
    uploadData.push(...multipleChoiceData);
    uploadData.push(...judgeData);
    uploadData.push(...fillData);
    uploadData.push(...discussData);


    // 校验题目类型不能为空
    if (uploadData.length === 0) {
      return ElMessage({
        type: 'error',
        message: `请至少上传一类题目`,
      })
    }

    console.log(uploadData)
    try {
      const res2 = await addNewQuestion(uploadData)
    } catch (error) {
      console.log(error)
    }
    batchAddRef.value.dialogVisible = false
    uploadClassesFile.value = null
    getQuestionList1(props.activeIndex1)
    ElMessage({
      type: 'success',
      message: '批量上传成功',
    })
  } else {
    ElMessage({
      type: 'error',
      message: "您上传的模板有误，请检查模板",
    })
  }
}

// 判断正确答案中有几个字母
function countUppercaseLetters (str) {
  let count = 0;
  for (let i = 0; i < str.length; i++) {
    const charCode = str.charCodeAt(i);
    if (charCode >= 65 && charCode <= 90) { // ASCII values for A-Z  
      count++;
    }
  }
  return count;
}

// 判断是否是大写字母ABCD的其中一个
function isABCDUpperCase (char) {
  // 检查char是否为单个字符  
  if (char.length !== 1) {
    return false;
  }

  // 获取字符的Unicode编码  
  const charCode = char.charCodeAt(0);

  // 检查Unicode编码是否在大写A到D的范围内  
  // 大写A的Unicode编码是65，大写D的Unicode编码是68  
  return charCode >= 65 && charCode <= 68;
}

function isHaveUppercaseE (str) {
  for (let i = 0; i < str.length; i++) {
    const charCode = str.charCodeAt(i);
    if (charCode === 69) { // ASCII value for 'E'  
      return true;

    }
  }
}

function isHaveUppercaseF (str) {
  for (let i = 0; i < str.length; i++) {
    const charCode = str.charCodeAt(i);
    if (charCode === 70) { // ASCII value for 'E'  
      return true;
    }
  }
}

// 判断多选题答案除了逗号外是否都是大写字母
function isStringOnlyUppercaseWithCommas (str) {
  // 检查str是否是字符串  
  if (typeof str !== 'string') {
    return false;
  }

  // 检查是否包含至少一个逗号  
  if (!str.includes(',')) {
    return false;
  }

  // 第一步：去掉逗号  
  let cleanStr = str.replace(/,/g, '');

  // 第二步：检查是否只包含大写字母  
  const regex = /^[A-Z]+$/;
  return regex.test(cleanStr);
}

// 判断判断题答案是否是大写字母AB
function checkString (str) {
  if (typeof str !== 'string') {
    return false; // 不是字符串，返回 false
  }

  if (str !== 'A' && str !== 'B') {
    return false; // 不是大写字母 "A" 或 "B"，返回 false
  }

  return true; // 是字符串且为大写字母 "A" 或 "B"，返回 true
}
// 处理分页变化
function pagination ({ page, limit }) {
  // console.log(page, limit)
  queryForm.value.pageNum = page
  queryForm.value.pageSize = limit
  // 请求数据
  // ...
  getQuestionList1(props.activeIndex1)
}

const isActive = ref(false)

// 试题查重
async function duplicateCheck1 () {
  isActive.value = !isActive.value
  if (isActive.value) {
    queryForm.value.pageNum = 1
    queryForm.value.pageSize = 10
    const res = await duplicateCheck({
      pageNum: queryForm.value.pageNum,
      pageSize: queryForm.value.pageSize,
      topicType: props.activeIndex1,
      sourceType: 0
    })
    total.value = res.data.total
    tableData.value = res.data.records

  } else {
    getQuestionList1(props.activeIndex1)
  }
}

function inputClear () {
  queryForm.value.searchValue = ""
  getQuestionList1(props.activeIndex1)
}

function clearPagination () {
  queryForm.value.pageNum = 1
  queryForm.value.pageSize = 10
}

// 向父组件暴露方法
defineExpose({
  getQuestionList1,
  clearPagination
})
</script>

<style lang="scss" scoped>
.box1 {
  background-color: #fff;
  .operateBox {
    display: flex;
    justify-content: space-between;
    .operateLeft {
      width: 656px;
      display: flex;
      justify-content: space-between;

      .batchDele {
        width: 112px;
        height: 40px;
        border-radius: 6px 6px 6px 6px;
        border: 1px solid #5974ff;
        font-size: 16px;
        color: #5974ff;
        &:hover {
          background-color: transparent;
        }
        &:focus {
          background-color: transparent;
        }
      }

      .export {
        width: 95px;
        height: 40px;
        border-radius: 6px 6px 6px 6px;
        border: 1px solid #5974ff;
        font-size: 16px;
        color: #5974ff;
        &:hover {
          background-color: transparent;
        }
        &:focus {
          background-color: transparent;
        }
      }

      .plagiarism {
        width: 112px;
        height: 40px;
        border-radius: 6px 6px 6px 6px;
        border: 1px solid #5974ff;
        font-size: 16px;
        color: #5974ff;
        // &:hover {
        //   background-color: transparent;
        // }
        // &:focus {
        //   background-color: transparent;
        // }
      }

      .searchBox {
        display: flex;
        width: 280px;
        height: 40px;
        background: #f5f5f5;
        border-radius: 6px;

        ::v-deep(.el-input__wrapper) {
          height: 40px;
          background-color: #f5f5f5 !important;
          box-shadow: 0;
          &:hover {
            box-shadow: 0;
            border: none;
          }
        }
        ::v-deep(.el-input__wrapper.is-focus) {
          box-shadow: none !important;
        }

        .searchIcon {
          width: 40px;
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 18px;
          color: #fff;
          background: #5974ff;
          border-radius: 0px 6px 6px 0px;
          cursor: pointer;
        }
      }
    }
    .operateRight {
      display: flex;
      align-items: center;

      .templateDownload {
        font-size: 16px;
        color: #44bd60;
        margin-right: 48px;
        cursor: pointer;
      }

      .addQuestion {
        width: 144px;
        height: 40px;
        background: #5974ff;
        border-radius: 6px 6px 6px 6px;
        &:hover {
          border-color: transparent;
        }
        &:focus {
          border-color: transparent;
        }
      }
    }
  }

  .tableBox {
    display: flex;
    padding-top: 23px;

    ::v-deep(.el-table__row:nth-child(even)) {
      background-color: #f5f5f5;
    }

    ::v-deep(.el-table__row) {
      height: 56px;
    }

    ::v-deep(.el-table tr) {
      height: 56px;
    }
  }

  .pagination {
    margin-top: 45px;
    display: flex;
    justify-content: end;

    ::v-deep(.is-active.number) {
      background-color: #5974ff;
    }
  }
}

.active {
  color: #fff !important;
  background: #5974ff;
}
</style>